<template>
  <button @click="throttledFn">throttledFn3s</button>
  <hr />
  <el-input v-model="searchQuery" placeholder="请输入内容"></el-input>
  <hr />
  <p>{{ value ? 'On' : 'Off' }}</p>
  <button @click="toggle()">Toggle</button>
</template>

<script setup>
import { useThrottleFn, useDebounceFn, useToggle } from '@vueuse/core'
import { watch, ref } from 'vue'
// 节流
const throttledFn = useThrottleFn(() => {
  console.log('throttledFn')
}, 3000)
// 防抖
const searchQuery = ref('')
const debouncedSearch = useDebounceFn(
  () => {
    console.log('Searching for:', searchQuery.value)
  },
  3000 // 防抖时间，单位毫秒
)
// 监听 searchQuery 的变化，并调用防抖函数
watch(searchQuery, debouncedSearch)
const [value, toggle] = useToggle()
</script>

<style lang="scss" scoped></style>
